<template>
	<view class="uni_box home">
		<navbar title='提交订单' backgroundColor="#f5f5f5">
		</navbar>
		<view class="content">
			<view class="tcheng" v-if="lei == 1">
				<!-- <view class="kdview kactive">快递</view>
				<view class="kdview">小时达</view> -->
				<u-tabs style="width: 100%;" :list="tablist" :is-scroll="false" :current="current" @change="change" active-color="#FF7C41" bg-color="none"></u-tabs>
			</view>
			
			
			<view class="dione" @click="getadress">
				<view class="diname" v-if="!addressinfo.id">
					<text class="dinametxt">请选择地址</text>
					<u-icon name="arrow-right" color="#222" size="28" style="margin-left: auto;"></u-icon>
				</view>
				<view class="diname" v-if="addressinfo.id">
					<text class="dinametxt">{{addressinfo.province.name+addressinfo.city.name+addressinfo.area.name+addressinfo.address}}</text>
					<u-icon name="arrow-right" color="#222" size="28" style="margin-left: auto;"></u-icon>
				</view>
				<view class="dimiao" v-if="addressinfo.id">
					{{addressinfo.name+' ' +addressinfo.mobile}}
				</view>
			</view>
			<view class="dione" v-if="current==1" @click="getmendian">
				<text class="meninfo">门店信息:</text>
				<view class="diname">
					<text class="dinametxt">{{shopinfo.name?shopinfo.name:'请选择附近门店'}}</text>
					<u-icon name="arrow-right" v-if="!newshop_id" color="#222" size="28" style="margin-left: auto;"></u-icon>
				</view>
				<view class="dimiao" v-if="shopinfo.address">
					{{shopinfo.address}}
				</view>
			</view>
			<view class="ditwo">
				<view class="shop" v-for="(item,index) in newlist" :key="index">
					<image class="shopimg" :src="ossThree(item.goods_image)"/>
					<view class="shopright">
						<text class="btname txt">{{item.goods_title}}</text>
						<!-- <text class="kucun">库存  100件</text> -->
						<view class="jiaview">
							<text class="jia">￥<text class="jianum">{{item.goods_price}}</text></text>
							<!-- <text class="yuanjia" disabled>￥799.00</text> -->
							<u-number-box class="ml" disabled v-model="item.goods_nums"></u-number-box>
						</view>
					</view>
				 </view>
				 <view class="liuyan">
					<text class="liuname">留言</text>
					<u-input class="iteminput" input-align="right" v-model="user_remark" type="text" placeholder='请输入' />
				 </view>
			</view>
			<view class="ditwo" v-if="delivery_money!=0">
				 <view class="liuyan">
					<text class="liuname">运费</text>
					<text class="yunjia">￥{{ delivery_money }}</text>
				 </view>
			</view>
			<view class="ditwo" v-if="current==1">
				 <view class="liuyan">
					<text class="liuname">当前门店库存</text>
					<text class="yunjia">{{stock}}</text>
				 </view>
			</view>
			<view class="tishi">店铺暂不支持快递发货  请选择 小时达 配送</view>

			<view class="botview">
				<text class="jia">￥<text class="jianum">{{total_money}}</text></text>
				<view class="zhi" @click="getpay">支付</view>
			</view>
		</view>

		<MenOrderPop v-if="menpopshow" :latitude="latitude" :longitude="longitude" :menpopshow="menpopshow" @getxuanmen="getxuanmen" @closemenpop="closemenpop" :tlist="tlist"></MenOrderPop>
	</view>
</template>

<script>
import MenOrderPop from '@/components/MenOrderPop/MenOrderPop'
	export default {
		components: {
			MenOrderPop
		},
		data() {
			return {
				value: 1,
				liuyan:'',
				lei:'1',//2购物车 1支付订单
				parms:{},
				addressinfo:{
					name:'',
					mobile:'',
					province:{
						name:'',
					},
					city:{
						name:'',
					},
					area:{
						name:'',
					},
					address:''
				},
				newlist:[],
				delivery_money:0,//运费
				total_money:0,//总金额
				ids:'',
				user_remark:'',//备注
				goods_sku_id:'',//直接下单携带规格id
				goods_id:'',//直接下单详情id
				tablist: [
					{
						name: '快递'
					}, 
					{
						name: '小时达'
					}
				],
				current: 0,
				menpopshow:false,//门店选择
				latitude:'',
				longitude:'',
				tlist:[],
				shopinfo:{},
				shop_id:'',
				newshop_id:'',
				addressinfo_id:'',//详情传入地址ID
				stock:0
			}
		},
		onLoad(option) {
			console.log(option)
			if(option.lei){
				this.lei = option.lei
			}
			
			if(option.lei==2){//从购物车进来
				let shopinfo = uni.getStorageSync('shopinfo')
				this.parms = JSON.parse(shopinfo)

			}else if(this.lei == 1){
				//直接下单
				if(option.goods_sku_id){
					this.goods_sku_id = option.goods_sku_id
				}
				if(option.goods_id){
					this.goods_id = option.goods_id
				}
				if(option.goods_nums){
					this.goods_nums = option.goods_nums
				}
				if(option.shop_id){//主页进入
					this.newshop_id = option.shop_id
				}
				if(option.addressinfo_id){//主页进入
					this.addressinfo_id = option.addressinfo_id
				}
				
				
			}
			
			this.getmoren();//获取默认地址
			this.getdinwei()
		},
		onShow() {
			let that = this
			uni.$on('isRefreshadress',function(data){
				that.addressinfo = data
				console.log('监听到事件来自返回的参数：' + JSON.stringify(data));
                // TODO 下面执行刷新的方法
			})
		},
		methods: {
			async getorder(){
				
				if(this.lei==2){
					//购物车
					let ids = []
					let parms = this.parms
					for(let i in parms){
						ids.push(parms[i].id)
					}
					this.ids = ids.toString();
					let res = await this.$u.api.getParamsByCart({
						ids:ids.toString(),
						coupon_id:'',
						address_id:this.addressinfo.id,
						// shop_id:this.shop_id
					});
					let data = res.goods_list
					for(let i in data){
						data[i].goods_nums = Number(data[i].goods_nums)
					}
					this.newlist = data
					this.delivery_money = res.delivery_money
					this.total_money = res.total_money
				}else if(this.lei == 1){
					let res = await this.$u.api.getParamsByGoods({
						goods_id:this.goods_id,
						coupon_id:'',
						address_id:this.addressinfo.id,
						goods_sku_id:this.goods_sku_id,
						goods_nums:this.goods_nums,
						
					});
					let data = res.goods_list
					for(let i in data){
						data[i].goods_nums = Number(data[i].goods_nums)
					}
					this.newlist = data
					this.delivery_money = res.delivery_money
					this.total_money = res.total_money
				}
				
			},
			async getmoren(){
				if(this.addressinfo_id){
					let res = await this.$u.api.addressall({
						limit:100,
						page:this.page
					});
					console.log(res)
					for(let i in res){
						if(res[i].id == this.addressinfo_id){
							this.addressinfo = res[i]
						}
					}
				}else{
					let res = await this.$u.api.addressdefault({
					});
					this.addressinfo = res
				}
				

				this.getorder();//获取订单信息
			},
			change(e){
				this.current = e
				if(this.current == 0){
					this.shop_id = ''
				}
				if(this.current == 1&&this.shop_id){

					this.getkucun();//查询小时达库存
				}
			},
			async getkucun(){
				let res = await this.$u.api.getShopGoodsShopStock({
					goods_id:this.goods_id,
					shop_id:this.shop_id?this.shop_id:this.newshop_id
				});
				this.stock = res.stock
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			getadress(){
				this.navrouter('/pages_client/twoPage/Adress?type=fabu')
			},
			async getpay(){
				if(!this.addressinfo.id){
					this.$u.toast("请选择地址");
					return;
				}
				if(this.current == 1&&!this.shop_id){
					this.$u.toast("请选择附近门店");
					return;
				}
				if(this.lei==2){
					//购物车
					let res = await this.$u.api.createByCart({
						ids:this.ids,
						coupon_id:'',
						address_id:this.addressinfo.id,
						user_remark:this.user_remark,
						shop_id:this.shop_id
					});
					this.zhifu(res.order_id)
				}else if(this.lei==1){
					//直接下单
					let res
					if(this.current == 1){
						res = await this.$u.api.createByGoods({
							goods_id:this.goods_id,
							coupon_id:'',
							address_id:this.addressinfo.id,
							goods_sku_id:this.goods_sku_id,
							goods_nums:this.goods_nums,
							user_remark:this.user_remark,
							parent_user_id:this.$store.state.invite_code||uni.getStorageSync('invite_code'),
							shop_id:this.shop_id
						});
					}else{
						res = await this.$u.api.createByGoods({
							goods_id:this.goods_id,
							coupon_id:'',
							address_id:this.addressinfo.id,
							goods_sku_id:this.goods_sku_id,
							goods_nums:this.goods_nums,
							user_remark:this.user_remark,
							parent_user_id:this.$store.state.invite_code||uni.getStorageSync('invite_code'),
							shop_id:''
						});
					}
					this.zhifu(res.order_id)
				}
			},
			async zhifu(order_id){
				let res = await this.$u.api.getOrderByGoods({
                    order_id: order_id
				});
				console.log(res)
                uni.requestPayment({
                    appId: res.appid,
                    nonceStr: res.nonceStr,
                    package: res.package,
                    paySign: res.paySign,
                    signType: res.signType,
                    timeStamp: res.timeStamp,
                    success: (e) => {
                        console.log(e)
                        uni.showToast({
                            title: '支付成功',
                            icon: 'success',
                            duration: 2500,
                        })
						setTimeout(() => {
							uni.switchTab({ url: '/pages/tabbar/My' })
						}, 1000);
                    },
                    fail: (e) => {
                        console.log(e)
                        this.$u.toast("支付失败");
						setTimeout(() => {
							uni.switchTab({ url: '/pages/tabbar/My' })
						}, 1000);
                        // uni.switchTab({ url: '/pages/tabbar/my' })
                        // uni.showModal({
                        //     content: "支付失败,原因为: " + e.errMsg,
                        //     showCancel: false
                        // })
                    }
                })
			},
			getdinwei(){
			
				//#ifdef MP-WEIXIN
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: (res)=>{
						console.log(res)
						if(res.latitude){
							that.latitude = res.latitude
						}
						if(res.latitude){
							that.longitude = res.longitude
						}
						if(this.newshop_id){//主页进入
							this.getmendianxian()
						}
					},fail:(e)=>{
						console.log(e)
					}
				})
				//#endif
				//#ifdef H5
				this.latitude = '34.74821'
				this.longitude = '113.61332'
				if(this.newshop_id){//主页进入
					this.getmendianxian()
				}
				//#endif
				
				
			},
			async getmendian(){
				if(this.newshop_id!=''){
					return;
				}
				let ids = ''
				if(this.lei == 1){
					//普通下单
					ids = this.goods_id
				}else if(this.lei == 2){
					//购物车
					let parms = this.parms
					let a = []
					for(let i in parms){
						a.push(parms[i].id)
					}
					ids =a.toString()
				}
				let res = await this.$u.api.getGoodsShopList({
					id:ids,
					// id:3,
					latitude:this.latitude,
					longitude:this.longitude
				});
				let data = res
				for(let i in data){
					data[i].isselect = false
				}
				this.tlist = data
				if(this.tlist!=''){
					this.menpopshow = true
				}else{
					this.$u.toast("暂无可用门店");
				}
				
			},
			async getmendianxian(){
				let res = await this.$u.api.getGoodsShopList({
					id:this.goods_id,
					latitude:this.latitude,
					longitude:this.longitude
				});
				let data = res
				for(let i in data){
					if(data[i].id == this.newshop_id){
						this.shopinfo = data[i]
						this.shop_id = data[i].id
					}

				}
			},
			closemenpop(){
				this.menpopshow = false
			},
			getxuanmen(e){
				console.log(e)
				this.closemenpop()
				this.shopinfo = e
				this.shop_id = e.id
				if(this.shop_id){
					this.getkucun();//查询小时达库存
				}
				
				// this.navrouter('/pages_client/twoPage/TuanDetail?type=2'+'&id='+this.shopid+'&shop_id='+e.id+'&longitude='+this.longitude+'&latitude='+this.latitude)
			},
			getnum(e){
				return Number(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5f5f5;
	}
	.content{
		background-color: #F5f5f5;
		padding-bottom: 130rpx;
		.dione{
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			margin: 25rpx;
			.meninfo{
				color: #333;
				font-size: 30rpx;
				font-weight: 500;
			}
			.dihead{
				display: flex;
				flex-direction: row;
				
			}
			.mo{
				background: #FD2A53;
				border-radius: 3rpx;
				padding: 1rpx 4rpx;
				font-weight: 500;
				font-size: 20rpx;
				color: #FFFFFF;
				display: inline-block;
				margin-right: 10rpx;
			}
			.jia{
				background: #4D88FE;
			}
			
		}
		.diname{
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
			display: flex;
			align-items: center;
			margin: 25rpx 0 15rpx;
			.dinametxt{
				display: inline-block;
				max-width: 94%;
			}
		}
		.dimiao{
			font-weight: 500;
			font-size: 26rpx;
			color: #222222;
		}
	}
	.ditwo{
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		margin:0 25rpx 25rpx;
		.shop{
			display: flex;
			flex-direction: row;
			background-color: #fff;
			margin-bottom: 20rpx;

			.shopimg{
				width: 180rpx;
				height: 180rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;

			}
			.shopright{
				// flex: 1;
				width: 67%;
				display: flex;
				flex-direction: column;
				padding-bottom: 8rpx;
				.btname{
					display: block;
					font-weight: 500;
					font-size: 26rpx;
					color: #222222;
				}
				.jiaview{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: auto;
				}
				
				.yuanjia{
					font-weight: 500;
					font-size: 26rpx;
					color: #999999;
					text-decoration: line-through;
					display: inline-block;
					margin-left: 10rpx;
					margin-top: 10rpx;
				}
				.kucun{
					margin-top: 10rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #808080;
				}
			}
		}
	}
	.jia{
		font-weight: bold;
		font-size: 32rpx;
		color: #FF7C41;
	}
	.jianum{
		font-size: 40rpx;
		position: relative;
		top: 3rpx;
	}
	.liuyan{
		display: flex;
		flex-direction: row;
		align-items: center;
		.liuname{
			font-weight: 500;
			font-size: 26rpx;
			color: #222222;
		}
		.iteminput{
			margin-left: auto;

		}
		.yunjia{
			margin-left: auto;
			font-weight: bold;
			font-size: 32rpx;
			color: #FF7C41;
		}
	}
	.botview{
		position: fixed;
		width: 100%;
		z-index: 100;
		bottom: 0;
		background: #FFFFFF;
		padding: 0 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 120rpx;
		.zhi{
			margin-left: auto;
			width: 236rpx;
			height: 90rpx;
			background: #FF7C41;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
	.tcheng{
		background: #FFFFFF;
		margin:10rpx 25rpx 25rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding:14rpx 15rpx;
		border-radius: 20rpx;
		.kdview{
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333;
			font-size: 28rpx;
			font-weight: 500;
			padding:20rpx 15rpx;
			border-radius: 10rpx;
		}
		.kactive{
			background-color: #FF7C41;
			color: #fff;
		}
	}
	.tishi{
		font-weight: 500;
		font-size: 26rpx;
		color: #F34343;
		display: block;
		margin-top: 20rpx;
		margin-left: 25rpx;
	}
</style>
